<template>
    <view class="container">
        <view class="part1">
            <receive-address :userInfo="userInfo" :option="false" v-if="order.type != 1" :showRight="false"></receive-address>
            <view class="order">
                <collapse-plus :list="[order]"></collapse-plus>
                <view class="refund-action-area" v-if="order.orderType === 0">
                    <view class="btns-refund" v-if="showBtnReturn" @click="goodreturn"> <text class="icon">&#xe63c;</text>退货 </view>
                    <view class="btns-refund" v-if="showBtnReturnMoney" @click="refundApply">
                        <text class="icon">&#xe616;</text>
                        退款
                    </view>
                    <view v-if="order.refundStatus == 1" class="tips">退款审核中</view>
                    <view v-if="order.refundStatus == 2" class="tips">退款已完成</view>
                </view>
                <!--实付款  -->
                <view class="pay-info">
                    <view class="u-flex u-row-between">
                        <text>商品总价</text>
                        <text>￥{{ Number(order.goodPrice).toFixed(2) }}</text>
                    </view>
                    <view class="u-flex u-row-between">
                        <text>运费</text>
                        <text>￥{{ Number(order.freight).toFixed(2) }}</text>
                    </view>
                    <view class="u-flex u-row-between">
                        <text>优惠</text>
                        <text>￥{{ Number(order.amountPrice).toFixed(2) }}</text>
                    </view>
                    <view class="u-flex u-row-between">
                        <text>实付款</text>
                        <text class="o-font-color-error">￥{{ Number(order.payPrice).toFixed(2) }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="order-info">
            <view class="title">订单信息</view>
            <view class="u-flex">
                <view>订单编号：</view>
                <view class="">{{ id }}</view>
                <view class="copy u-margin-left-20" @click="copy(id)">复制</view>
            </view>
            <view class="u-flex u-col-center">
                <view>支付类型：</view>
                <view class="u-flex u-col-center" v-if="order.orderPayType === 0">
                    <u-image src="/static/icon/10030.png" width="40" height="40"></u-image>
                    <text class="u-margin-left-20">支付宝</text>
                </view>
                <view class="u-flex u-col-center" v-if="order.orderPayType === 1">
                    <u-image src="/static/icon/10029.png" width="40" height="40"></u-image>
                    <text class="u-margin-left-20">微信</text>
                </view>
                <view class="u-flex u-col-center" v-if="order.orderPayType === 2">
                    <u-image src="/static/icon/10031.png" width="40" height="40"></u-image>
                    <text class="u-margin-left-20">线下</text>
                </view>
                <view class="u-flex u-col-center" v-if="order.orderPayType === 3">
                    <u-image src="/static/icon/10032.png" width="40" height="40"></u-image>
                    <text class="u-margin-left-20">授信</text>
                </view>
            </view>
            <view class="u-flex">
                <view>下单时间：</view>
                <view>{{ order.addTime }}</view>
            </view>
            <view class="u-flex">
                <view>付款时间：</view>
                <view>{{ order.payTime }}</view>
            </view>
            <view class="u-flex" v-if="order.completeTime">
                <view>签收时间：</view>
                <view>{{ order.completeTime }}</view>
            </view>
        </view>
        <view class="order-info">
            <view class="u-flex">
                <view class="shrink">备注：</view>
                <view>{{ order.buyerRemark || '无' }}</view>
            </view>
        </view>

        <view class="hover-btns">
            <u-button class="u-flex-1" type="none" :hair-line="false" @click="contactService">
                <text class="icon">&#xe632;</text>
                联系客服
            </u-button>
            <u-button class="u-flex-1" type="p" v-if="order.status === 4" @click="receive(id)">确认收货</u-button>
        </view>
        <u-modal v-model="showModal" content="在确认前,请确认您已收到货!!!" title="" @confirm="confirm" show-cancel-button></u-modal>
    </view>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useUserStore } from '@/store'
import collapsePlus from './collapsePlus.vue'
import { onLoad } from '@dcloudio/uni-app'

interface O {
    [key: string]: any
}

const userInfo = ref({})

const order = ref<O>({})

const id = ref<number | string>(0)

const list = ref([])

const showModal = ref(false)

const temp = ref<string | number>('')

const userStore = useUserStore()

/**  是否显示退货按钮
 *逻辑: 1. 待收货订单 才能 显示退货按钮  order.status === 4
 *3. 只有未发生过退款的订单才能退货  order.refundStatus === 0
 *4. 交易已经完成的订单 order.status === 5
 *5. 确认时间必须在30天内
 *6. 2021年10月23日 新增 游客不能退款
 *7. 虚拟商品不能退货 退款  type == 1  表示虚拟商品
 */
const showBtnReturn = computed(() => {
    let bool = true
    // 7
    if (order.value.type == 1) return false
    // 6.游客不能退款
    if (userStore.userInfo.type === 3) return false
    // 5.判断当前时间 是否超过订单确认时间30天
    if (new Date().getTime() - new Date(order.value.updateTime).getTime() > 30 * 24 * 60 * 60 * 1000) {
        bool = false
    }
    // 3.
    if (order.value.refundStatus === 0) {
        //4.
        return order.value.status === 4 || (order.value.status === 5 && bool)
    } else {
        return false
    }
    return true
})
/** 是否显示退款按钮
 *   1. 待发货 才可以退款 order.status === 3
 *    3. 只有未发生过退款的订单才能退  order.refundStatus === 0
 *    ~~4. 虚拟商品 无法退~~
 *    5. 游客不能退款
 *    6.虚拟订单 已完成 也可以退款
 */
const showBtnReturnMoney = computed(() => {
    // 游客不能退款
    if (userStore.userInfo.type === 3) return false
    //1
    if (order.value.status != 3) return false
    //3
    if (order.value.refundStatus != 0) return false
    // 实物商品 并且 rder.status == 5 : 交易完成
    if (order.value.type == 1 && order.value.status == 5) return true
    return true
})
/** 退货 */
function goodreturn() {
    uni.$u.$MRouter.salesReturn.to({ id: id.value })
}
//**退款 */
function refundApply() {
    uni.$u.$MRouter.orderRefund.to({ id: id.value })
}

function copy(str: string | number) {
    // 复制的时候 移除空格
    str = uni.$u.trim(str, 'all')
    // #ifndef H5
    uni.setClipboardData({
        data: String(str),
        success: () => {
            uni.$u.toast('已经复制到剪切板')
        },
        fail: () => {
            uni.$u.toast('发生了意外')
        }
    })
    // #endif
    // #ifdef H5
    uni.$u.toast('不支持H5')
    // #endif
}
/** 联系客服 */
function contactService() {
    let card = JSON.stringify({
        no: id.value,
        model: 2,
        picId: order.value.skus[0].picId,
        title: order.value.skus[0].name,
        price: order.value.totalPrice
    })
    uni.$u.$MRouter.imChat.to({ card })
}
/** 收货 */
function receive(id: string | number) {
    showModal.value = true
    temp.value = id
}

function confirm() {
    uni.$u.$api.OrderApi.confirmReceipt({ id: temp.value }).then(() => {
        uni.$u.toast('确认收货成功!')
        order.value.status = 5
    })
}

onLoad((option: any) => {
    id.value = JSON.parse(option.para).id
})

onMounted(() => {
    uni.$u.$api.OrderApi.queryOrderDetail({ id: id.value }).then((res: any) => {
        // 虚拟订单 不显示收货人
        if (res.order.type != 1) {
            let userinfo = res.orderLogistics
            let temp = [userinfo.receiverProvinceName, userinfo.receiverCityName, userinfo.receiverAreaName, userinfo.receiverDetailAddress].filter(m => m != 'undefined')
            userInfo.value = {
                username: userinfo.receiverName,
                phone: userinfo.receiverPhone,
                address: temp.join('')
            }
        }

        let temp = res.order
        temp.goodPrice = temp.payPrice - temp.freight + temp.amountPrice
        let list = []
        let totalNum = 0
        res.skus.forEach((item: any) => {
            item.num = item.sku
                .map((m: any) => m.num)
                .reduce((pre: number, cur: number) => {
                    return pre + cur
                })
            item.total = item.sku
                .map((m: any) => m.totalPrice)
                .reduce((pre: number, cur: number) => {
                    return pre + cur
                })
            totalNum += item.num
        })
        order.value = Object.assign(order.value, temp)
        order.value.totalNum = totalNum
        order.value.skus = res.skus
        // this.$forceUpdate();
    })
})
</script>

<style scoped lang="scss">
.container {
    padding: 30rpx;
    padding-bottom: 220rpx;
    .hover-btns {
        width: 100vw;
        position: fixed;
        bottom: 0rpx;
        left: 0;
        // background-color: white;
        background-color: #f8f8f8;
        padding: 20rpx;
        z-index: 99;
        padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
        letter-spacing: 6rpx;
        & > button:nth-child(2) {
            margin-top: 20rpx;
        }
    }

    .part1 {
        border-radius: 10rpx;

        .order {
            font-size: 28rpx;
            position: relative;
            border-radius: 10rpx;
            overflow: hidden;

            &-status {
                position: absolute;
                top: 10rpx;
                right: 10rpx;
                color: #ff9933;
            }

            .pay-info {
                border-top: 1rpx solid $uni-bg-color-grey;
                padding: 20rpx;
                font-size: 28rpx;
                line-height: 60rpx;
                background-color: white;
            }
        }
    }

    .order-info {
        margin-top: 20rpx;
        padding: 20rpx;
        background-color: $uni-bg-color;
        border-radius: 10rpx;
        font-size: 28rpx;
        line-height: 60rpx;

        .title {
            font-size: 28rpx;
        }

        .copy {
            display: inline-block;
            transform: scale(0.9);
            color: #1677ff;
            padding: 4rpx 20rpx;
            height: 42rpx;
            line-height: 42rpx;
            margin-top: 12rpx;
            background-color: #e9eff8;
            font-size: 24rpx;
        }
    }
}
.refund-action-area {
    display: flex;
    .btns-refund {
        width: 100%;
        margin: 20rpx 0;
        background-color: white;
        height: 88rpx;
        border-radius: 20rpx;
        text-align: center;
        line-height: 88rpx;
        font-weight: bold;
    }
    .tips {
        color: #8c8c8c;
        width: 100%;
        margin: 20rpx 0;
        background-color: white;
        height: 88rpx;
        border-radius: 20rpx;
        text-align: center;
        line-height: 88rpx;
        font-weight: bold;
    }
}
.icon {
    margin-right: 10rpx;
}
.shrink {
    flex-shrink: 0;
}
</style>
